﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <title></title>
    <link type="text/css" rel="stylesheet" media="all" href="../styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css"/>

    <script language="javascript" type="text/javascript">
        function deleteRole() {
            var r = window.confirm("确定要删除此角色吗？");
            document.getElementById("operate_result_info").style.display = "block";
        }
    </script>
    <script src="../js/module.js"></script>


</head>
<body>
<!--Logo区域开始-->
<div id="header">
    <img src="../images/logo.png" alt="logo" class="left"/>
    <a href="#">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
    <ul id="menu">
        <li><a href="../index.html" class="index_off"></a></li>
        <li><a href="../user/user_info.html" class="information_off"></a></li>
        <li><a href="../user/user_modi_pwd.html" class="password_off"></a></li>
    </ul>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
    <form action="" method="">
        <!--查询-->
        <div class="search_add">
            <input type="button" value="增加" class="btn_add" onclick="location.href='role_add.html';"/>
        </div>
        <!--删除的操作提示-->
        <div id="operate_result_info" class="operate_success">
            <img src="../images/close.png" onclick="this.parentNode.style.display='none';"/>
            <!--删除成功！-->
        </div> <!--删除错误！该角色被使用，不能删除。-->
        <!--数据区域：用表格展示数据-->
        <div id="data">
            <table id="datalist">
                <tr>
                    <th>角色 ID</th>
                    <th>角色名称</th>
                    <th class="width600">拥有的权限</th>
                    <th class="td_modi"></th>
                </tr>
                <tbody id="tbody"></tbody>
            </table>

        </div>
        <!--分页-->
        <div id="pages">
            <a href="#">上一页</a>
            <a href="#" class="current_page">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">下一页</a>
        </div>
    </form>
</div>
<!--主要区域结束-->
<div id="footer">
    <p>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</p>
    <p>版权所有(C)云科技有限公司 </p>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "GET",
            url: "/kobe/role.do",
            dataType: "json",
            // async: false,
            success: function (data) {
                // console.log(data);
                var tbody = $('#tbody');
                // tbody.empty();
                for (var item of data) {
                    var tr = $('<tr></tr>');
                    var roleId = $('<td></td>').text(item.roleId);
                    var name = $('<td></td>').text(item.name);
                    var moduleInfos = item.roleModule.moduleInfoList;
                    var miName = $('<td></td>');
                    var td = $('<td></td>');
                    minput = $('<input id="imodify" type="button" value="修改" class="btn_modify"/>');
                    var dinput = $('<input id="idelete" type="button" value="删除" class="btn_delete"/>');
                    for (var item1 of moduleInfos) {
                        miName.text(item1.miName);
                    }
                    td.append(minput).append(dinput);
                    tr.append(roleId).append(name).append(miName).append(td);
                    tbody.append(tr);
                }
            }
        })
    })
    $('#datalist').click(function (e) {
        //获取目标里的第一个内容(parentNode父级\firstChild第一个儿子\textContent获取内容)
        var rId = e.target.parentNode.parentNode.firstChild.textContent;
        // console.log(e.target.value);
        // console.log(rId);
        //获取点击的内容
        var elem = e.target.value;

        if (elem === "修改") {
            $.ajax({
                url: "/kobe/role/role_modi.html",
                success: function () {
                    location.href = "/kobe/role/role_modi.html?roleId=" + rId
                }
            })
        }

        if (elem === "删除") {
            $.ajax({
                url: "/kobe/deleteRole.do?roleId=" + rId,
                type: "get",
                success: function (r) {
                    if (r) {
                        $('#operate_result_info').attr('class', 'operate_success').text('删除成功!');
                        showResultDiv(true);
                        window.setTimeout("showResultDiv(false);", 3000);
                    } else {
                        $('#operate_result_info').attr('class', 'operate_fail').text('删除失败!');
                        showResultDiv(true);
                        window.setTimeout("showResultDiv(false);", 3000);
                    }
                    setTimeout("location.reload(true)", 3000);
                }
            })
        }
    });

    function showResultDiv(f) {
        var divResult = document.getElementById("operate_result_info");
        if (f)
            divResult.style.display = "block";
        else
            divResult.style.display = "none";
    }
</script>
</html>
